<template>
  <div class="shujuzonglan">
    <div class="shujuzonglan-title1">
      <my-date width="301"></my-date>
      <my-select width="160" :items="test" ph="全部客服组"></my-select>
      <my-select width="160" :items="test1" ph="全部客服"></my-select>
      <div style="margin-left: 130px">
        <my-button width="120">导出当前数据</my-button>
      </div>
    </div>
    <div class="shujuzonglan-item">
      <div
        class="shujuzonglan-item1"
        v-for="item in navItems"
        :key="item.title"
      >
        <tongji-card
          :title="item.title"
          :data="item.data"
          :tip="item.tip"
        ></tongji-card>
      </div>
    </div>
    <div style="width: 1040px; height: 500px">
      <div class="sjzl-graph1-title">会话数</div>
      <div ref="sjzlChart" :style="{ width: '1000px', height: '400px' }"></div>
    </div>
    <div style="display: flex; margin-left: 50px">
      <div ref="pieChart1" style="width: 520px; height: 600px"></div>
      <div ref="pieChart2" style="width: 520px; height: 600px"></div>
    </div>
    <div class="img1">
      <img src="./China_1.png" alt />
    </div>
  </div>
</template>

<script>
import MyDate from "@/components/MyInput/MyDate.vue";
import MySelect from "@/components/MyInput/MySelect.vue";
import MyButton from "@/components/MyInput/MyButton.vue";
import TongjiCard from "@/components/TongjiCard.vue";

export default {
  components: {
    MyDate,
    MySelect,
    TongjiCard,
    MyButton,
  },
  mounted() {
    this.chartFn1();
    this.chartFn2();
    this.drawLine();
  },
  data() {
    return {
      test: [
        {
          label: "全部",
          value: 0,
        },
        {
          label: "客服组1",
          value: 1,
        },
        {
          label: "客服组2",
          value: 2,
        },
        {
          label: "客服组3",
          value: 3,
        },
      ],

      test1: [
        {
          label: "王美美",
          value: 0,
        },
        {
          label: "七尾",
          value: 1,
        },
        {
          label: "李想",
          value: 2,
        },
        {
          label: "王志",
          value: 3,
        },
      ],
      navItems: [
        {
          title: "总会话量",
          data: "230",
          tip: "有效会话数200",
        },
        {
          title: "总客户数",
          data: "30",
          tip: "有效客户20",
        },
        {
          title: "总访问量",
          data: "208",
          tip: "访客对话率50%",
        },
        {
          title: "平均会话时长",
          data: "9m3s",
          tip: "平均响应时间30s",
        },
        {
          title: "好评率",
          data: "78%",
          tip: "评价率67%",
        },
        {
          title: "一次性解决问题",
          data: "60%",
          tip: "解决率65%",
        },
        {
          title: "总会话消息数",
          data: "2900",
          tip: "有效消息数200",
        },
        {
          title: "总人工消息数",
          data: "2600",
          tip: "总客服消息数2389",
        },
        {
          title: "平均每会话消息数",
          data: "28",
          tip: "平均每会话有效数15",
        },
      ],
    };
  },
  methods: {
    drawLine() {
      var myChart = this.$echarts.init(this.$refs.sjzlChart);
      myChart.setOption({
        title: {
          // text: "访问量统计"
        },
        tooltip: {
          trigger: "axis",
          // 坐标轴指示器配置项。
          axisPointer: {
            type: "cross", //指示器样试
          },
        },
        toolbox: {
          feature: {
            // 动态类型切换,切换图表
            magicType: {
              type: ["line", "bar"],
            },
            //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
            dataView: {
              show: true, //是否显示 数据示图
              readOnly: false, //是否 直接可以编辑数据。
            },
            //保存为图片的配置
            saveAsImage: {
              show: true,
            },
            //配置项还原
            restore: { show: true },
          },
        },
        //图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
        legend: {
          data: ["总访问量", "总会话量", "有效会话量"], //对应的是name
        },
        //配置X轴
        xAxis: {
          //坐标轴类型
          type: "category",
          //配置类目名称。 可以逐一设置，具体看文档
          data: [
            "10:00",
            "10:30",
            "11:00",
            "11:30",
            "12:00",
            "12:30",
            "13:00",
            "13:30",
            "14:00",
            "14:30",
            "15:00",
            "15:30",
            "16:00",
            "16:30",
            "17:00",
          ],
          //配置 鼠标移入时显示的 阴影指示器'line' 直线指示器 'shadow' 阴影指示,器  'none' 无指示器
          axisPointer: {
            show: true, //show 必须写，开关的作用
            type: "shadow",
          },
        },
        //配置Y轴
        yAxis: [
          {
            type: "value", //坐标轴类型
            // name: "会话数",
            min: 0,
            max: 75,
            interval: 15,
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        //系列列表。每个系列通过 type 决定自己的图表类型,一个对象表示一个列表
        series: [
          {
            name: "总访问量",
            type: "line",
            data: [40, 34, 36, 50, 48, 62, 49, 50, 55, 65, 57, 65, 70, 56, 61],
            itemStyle: {
              color: "#90EE90",
            },
          },
          {
            name: "总会话量",
            type: "line",
            data: [33, 27, 32, 45, 40, 52, 43, 44, 42, 55, 42, 35, 45, 33, 31],
            itemStyle: {
              color: "#FF0000",
            },
          },

          {
            name: "有效会话量",
            type: "line",
            data: [25, 25, 30, 33, 35, 42, 33, 24, 32, 45, 32, 25, 40, 30, 25],
            itemStyle: {
              color: "#F90",
            },
          },
        ],
        //图表的颜色
        color: [
          "#CCC",
          "#AFA",
          "#61a0a8",
          "#d48265",
          "#91c7ae",
          "#749f83",
          "#ca8622",
          "#bda29a",
          "#6e7074",
          "#546570",
          "#c4ccd3",
        ],
      });
      //鼠标事件
      myChart.on("click", function (params) {
        console.log(params);
      });
    },
    chartFn1() {
      // 基于准备好的dom，初始化echarts实例
      var pieChart1 = this.$echarts.init(this.$refs.pieChart1);
      pieChart1.setOption({
        title: {
          text: "客户来源占比",
          x: "center",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: [
            "网页 880",
            "APP 300",
            "小程序 200",
            "公众号 130",
            "头条号 60",
          ],
        },

        series: [
          {
            label: {
              normal: {
                show: true,
                position: "top",
                formatter: "{c}%",
              },
            },

            name: "访问来源",
            type: "pie",
            radius: ["30%", "45%"],
            center: ["50%", "60%"],
            data: [
              {
                value: 800,
                name: "网页 880",
                itemStyle: { normal: { color: "	#006effe5" } },
              },
              {
                value: 300,
                name: "APP 300",
                itemStyle: { normal: { color: "	#FF8C00" } },
              },
              {
                value: 200,
                name: "小程序 200",
                itemStyle: { normal: { color: "	#D8BFD8" } },
              },
              {
                value: 130,
                name: "公众号 130",
                itemStyle: { normal: { color: "#8FBC8F" } },
              },
              {
                value: 60,
                name: "头条号 60",
                itemStyle: { normal: { color: "#FFB6C1" } },
              },
            ],
          },
        ],
      });
    },
    chartFn2() {
      // 基于准备好的dom，初始化echarts实例
      var pieChart2 = this.$echarts.init(this.$refs.pieChart2);
      pieChart2.setOption({
        title: {
          text: "评价占比",
          x: "center",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["好评 880 40%", "中评 300 30%", "差评 130 20%"],
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["30%", "45%"],
            center: ["50%", "60%"],
            data: [
              {
                value: 880,
                name: "好评 880 40%",
                itemStyle: { normal: { color: "#006effe5" } },
              },
              {
                value: 300,
                name: "中评 300 30%",
                itemStyle: { normal: { color: "#8FBC8F" } },
              },
              {
                value: 130,
                name: "差评 130 20%",
                itemStyle: { normal: { color: "#FFB6C1" } },
              },
            ],
          },
        ],
      });
    },
  },
};
</script>

<style>
.shujuzonglan {
  background-color: white;
  padding-top: 20px;
  width: 1040px;
}
.shujuzonglan-title1 {
  width: 1025px;
  display: flex;
  justify-content: space-around;
}

.shujuzonglan-item {
  display: flex;
  flex-wrap: wrap;
  width: 1040px;
}

.shujuzonglan-item1 {
  margin-top: 30px;
  margin-left: 15px;
}

.sjzl-graph1-title {
  font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  margin: 20px 20px 0;
}
</style>